<template>
	<view class="commission">
		<navBar title="推广详情"></navBar>

		<view class="product flex_center">
			<view class="image">
				<image :src="item.type == 1 ? item.content[0].image : item.content.image" mode="aspectFill">
				</image>
			</view>
			<view class="text">
				<view class="name hidden">{{
							item.type == 1 ? `${item.content.length}个作品` : item.content.name
						}}</view>
				<view class="grid">
					<view class="item flex_r_between">
						<text>推广方式</text>
						<view>{{
									item.type == 1 ? '作品推广'
									: item.type == 6 ? '消息推广'
									: item.type == 5 ? '达人推广'
									: ''
							}}</view>
					</view>
					<view class="item mt6 flex_r_between">
						<text>消费金额</text>
						<view class="red">-{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>


		<view class="header flex_center">
			<view class="item">
				<text>推广费</text>
				<view>{{item.price || '0.00'}}</view>
			</view>
			<view class="item">
				<text>成交(单)</text>
				<view>{{item.order_num || 0}}</view>
			</view>
			<view class="item">
				<text>已曝光</text>
				<view class="red">{{item.finishh_num || 0}}</view>
			</view>
		</view>

		<view class="table" v-if="item.type == 5">
			<view class="title flex_center">
				<view class="th flex_r_around">
					带货达人
				</view>
				<view class="th flex_r_around">
					曝光
				</view>
				<view class="th flex_r_around">
					成交(单)
				</view>
				<view class="th flex_r_around">
					佣金(元)
				</view>
			</view>
			<empty v-if="!list.length"></empty>
			<view class="tr flex_center" v-for="(item,index) in list" :key="index">
				<view class="td flex_r_around">
					<image :src="item.avatar" mode="aspectFill"></image>
				</view>
				<view class="td flex_r_around">
					<text>{{item.exposure_num}}</text>
				</view>
				<view class="td flex_r_around">
					<text>{{item.order_num}}</text>
				</view>
				<view class="td flex_r_around">
					<text>{{
						item.rec_show == 0 || item.rec_show == 1 ? '正在推广中' : item.brokerage
					}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import navBar from '@//compentents/navBar/navBar.vue';
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			navBar,
			empty,
		},
		data() {
			return {
				item: {},
				
				list: [],
				page: 1,
				total: 0,
			}
		},
		methods: {
			getList(){
				this.$get('/popularize/getSellGoodsEredar',{
					page: this.page
				}).then(res=>{
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			}
		},

		onLoad(option) {
			this.item = JSON.parse(option.data);
			if(this.item.type == 5){
				this.getList();
			}
		}
	}
</script>

<style lang="less" scoped>
	.commission {
		padding: 24rpx;
	}

	.product {
		margin-bottom: 16rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 16rpx;

		.image {
			width: 176rpx;
			height: 176rpx;
			background: #D8D8D8;
			border-radius: 16rpx;
			overflow: hidden;
			margin-right: 18rpx;

			image {
				width: 176rpx;
				height: 176rpx;
			}
		}

		.text {
			flex: 1;
			overflow: hidden;

			.name {
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 30rpx;
			}

			.grid {
				.item {
					text {
						font-size: 26rpx;
						color: #999999;
						line-height: 32rpx;
					}

					view {
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
					}

					.red {
						font-weight: 600;
						font-size: 28rpx;
						color: #FD2A53;
					}
				}

				.mt6 {
					margin-top: 6rpx;
				}
			}
		}
	}

	.header {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx 32rpx 30rpx;
		margin-bottom: 16rpx;

		.item {
			flex: 1;
			overflow: hidden;

			text {
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
			}

			view {
				font-weight: 600;
				font-size: 40rpx;
				color: #000000;
			}

			.red {
				color: #FD2A53;
				font-size: 32rpx;
			}
		}
	}


	.table {
		border-radius: 24rpx;
		overflow: hidden;

		.title {
			.th {
				height: 64rpx;
				background: #FFEAEE;
				flex: 1;
				background: #FFEAEE;
				border-bottom: 2rpx solid #EDEDED;
				border-right: 2rpx solid #EDEDED;
				font-size: 28rpx;
				line-height: 64rpx;
				color: #131313;
			}
		}

		.tr {
			.td {
				flex: 1;
				height: 96rpx;
				background: #FFFFFF;
				border-bottom: 2rpx solid #EDEDED;
				border-right: 2rpx solid #EDEDED;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
				}

				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 32rpx;
					color: #EDEDED;
				}
			}
		}
	}
</style>